<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../../../jquery-js/jquery.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            box-sizing: border-box;
            margin: 0 auto;
            position: relative;
             overflow: hidden;
        }
        ul{
            width: auto;
            height: 300px;
            position: absolute;
            left: -500px;
        }
        li{
            width: 500px;
            height: 300px;
            float: left;
        }
        img{
            width: 500px;
            height: 300px;
        }
        button{
            position: absolute;
            width: 50px;
            height: 30px;
            background: white;
            top: 45%;
        }
        .zuo{
            left: 0;
        }
        .you{
            right: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="./img/sfq_1.jpg" alt=""></li>
        <li><img src="./img/sfq_2.jpg" alt=""></li>
        <li><img src="./img/sfq_3.jpg" alt=""></li>
        <li><img src="./img/sfq_4.jpg" alt=""></li>
        <li><img src="./img/sfq_5.jpg" alt=""></li>
    </ul>
    <button type="button" class="zuo">&lt;</button>
    <button type="button" class="you">&gt;</button>
</div>
</body>
<script type="text/javascript">
    $(function(){
        /* 动态修改ul的宽度 */
        var width = $(" ul li").width()*$("ul li").length;
        width = width+"px";
        $("ul").css("width",width)

        /* 点击向右滑动 */
        $(".you").click(function(){
            $("ul").stop(false,true);
            $("ul").animate({left:"-1000px"},function(){
                $("ul li:eq(0)").appendTo($("ul"))
                $("ul").css("left","-500px")
            })
        })
        /* 点击向左滑动 */
        $(".zuo").click(function(){
            $("ul").stop(false,true);
            $("ul").animate({left:"0"},function(){
                $("ul li:last-child").prependTo($("ul"))
                $("ul").css("left","-500px")
            })
        })
    })
</script>
</html>